一、網站架構

• 這禮拜預計完成項目

1. 全網站 Model 管理
2. 商品管理
   • 商品資料
   • 商品分類(規格)管理
3. 全網站架構管理
4. 文章管理
5. 使用者管理

路由

資料庫
https://drive.google.com/file/d/1btUYU5fmyWlFepwKDFWHYusVCtX790FI/view?usp=sharing

二、全網站 Model 管理

• 資料表: pj_data_type
• 路由:
  
• 主要功能: 紀錄特定 Model 給予編號, 可用來建置後臺選單
  • 建立 Trait 提供給 Model 一個 model_id 特徵

      namespace App\Traits;
  
      /**
       * 設定 model id, 提供給共用圖片資料分辨屬於哪一個 model 下的資料
       */
      trait HasModelId {
  
          protected $model_id = 0; // 全站唯一值
  
          public function get_model_id() {
              return $this->model_id;
          }
  
          public function set_model_id($model_id) {
              $this->model_id = $model_id;
          }
  
      }
  

  • 在 server provider 將需要的模組綁定到容器上, 可從容器上取得 model id, 同時檢查模組是否有記錄到資料庫中, 沒有則新建一筆紀錄

      const ModelIds = [
          Article::class => '1',
          Product::class => '2',
          SpecCategory::class => 3,
          DataType::class => 4,
      ];
  
      $this->app->singleton(Article::class, function($app) {
          $article = new Article();
          $article->set_model_id(self::ModelIds[Article::class]);
          return $article;
      });
  

  • 後台提供編輯, 設定模組別名、Icon、是否隱藏選項, 設定顯示在選單上樣式
    
    

三、商品規格分類

• 資料表: pj_sepc_category
• 路由:
  
• 主要功能: 設定商品總規格分類共兩個階層, 商品編輯時可以單獨使用不同父階層下的規格, 儲存在另一張資料表 pj_product_spec 建立關係
  • 列表頁
    
  • 編輯頁
    

四、商品編輯頁套件處理

• 在共用模板中建立 @stack('styles') 和 @stack('scripts') 提供給繼承的模板引入頁面的 css、js 檔案
• ckeditor: 使用 cdn 載入

    <!-- ckeditor cdn -->
    <script src="//cdn.ckeditor.com/4.19.1/standard/ckeditor.js"></script>
    
    <!-- 設應 textarea class ckeditor -->
    <div class="mb-3 col-12">
        <label for="intro" class="form-label">商品介紹(*)</label>
        <textarea name="intro" class="form-control ckeditor" id="intro" rows="5"></textarea>
    </div>

• filepond: 圖片上傳套件, 使用 Laravel Mix 合併資源檔
  • npm 安裝套件

      # npm 安裝需要的套件
      # 套件主要 js
      npm i filepond --save   
      # 預覽效果
      npm i filepond-plugin-image-preview --save
      # 驗證檔案
      npm i filepond-plugin-file-validate-type --save
  

  • 新建檔案 resources/js/filepond.js
    • 引入 css 檔要在前面加 '../../' 才可以讀到

    // 主程式
    import * as FilePond from 'filepond';
    import '../../node_modules/filepond/dist/filepond.min.css';
    // 預覽圖片
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
    import '../../node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
    // 驗證規則
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

    // 註冊外部套件
    FilePond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateType);

    // 將 FilePond 加到 window
    window.FilePond = FilePond

• webpack.conf.js 設定, 產生 filepond.js 檔案到 public 目錄下

    mix.js('resources/js/filepond.js', 'public/admin/assets/js/filepond.js');

• 使用

    <!-- 引入匯出的js與樣式 -->
    <script src="{{ mix('/admin/assets/js/filepond.js') }}"></script>
    <script>
        // 取得元素
        const inputElement = document.querySelector('#productImg');
        // 配置設定項目
        FilePond.setOptions({
            name: 'productImg[]', // input 名稱
            storeAsFile: true, // 用表單方式送出
            allowMultiple: true, // 允許多檔案
            maxFiles: 5, // 最多5個檔案
            acceptedFileTypes: ['image/png', 'image/jpg', 'image/jpeg'], // 限制格式
            // acceptedFileTypes 會受到 html input accept 影響, 限制格式須以 image/jpg 設定, 用簡寫 .jpg 檢測會發生錯誤
        });



        // 建立上傳 input
        const pond = FilePond.create(inputElement);  
    </script>

github 進版
剩下的天繼續...